<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en-US">
<head>
<!-- GenHTML revision 25226-->
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>The ajaxguessnumber Example Application - The Java EE 6 Tutorial</title>
<meta name="robots" content="index,follow">
<meta name="robots" content="index,follow">
<meta name="date" content="2011-03-01">
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" type="text/css" href="css/ipg.css">
<link rel="stylesheet" type="text/css" href="css/javaeetutorial.css">
</head>

<body>

<table border="0" cellpadding="5" cellspacing="0" width="100%">
<tbody>
   <tr valign="top">
      <td width="400px"><p class="toc level1"><a href="docinfo.html">Document Information</a></p>
<p class="toc level1 tocsp"><a href="gexaf.html">Preface</a></p>
<p class="toc level1 tocsp"><a href="gfirp.html">Part&nbsp;I&nbsp;Introduction</a></p>
<p class="toc level2"><a href="bnaaw.html">1.&nbsp;&nbsp;Overview</a></p>
<p class="toc level2"><a href="gfiud.html">2.&nbsp;&nbsp;Using the Tutorial Examples</a></p>
<p class="toc level1 tocsp"><a href="bnadp.html">Part&nbsp;II&nbsp;The Web Tier</a></p>
<p class="toc level2"><a href="bnadr.html">3.&nbsp;&nbsp;Getting Started with Web Applications</a></p>
<p class="toc level2"><a href="bnaph.html">4.&nbsp;&nbsp;JavaServer Faces Technology</a></p>
<p class="toc level2"><a href="giepx.html">5.&nbsp;&nbsp;Introduction to Facelets</a></p>
<p class="toc level2"><a href="gjddd.html">6.&nbsp;&nbsp;Expression Language</a></p>
<p class="toc level2"><a href="bnaqz.html">7.&nbsp;&nbsp;Using JavaServer Faces Technology in Web Pages</a></p>
<p class="toc level2"><a href="gjcut.html">8.&nbsp;&nbsp;Using Converters, Listeners, and Validators</a></p>
<p class="toc level2"><a href="bnatx.html">9.&nbsp;&nbsp;Developing with JavaServer Faces Technology</a></p>
<p class="toc level2"><a href="gkmaa.html">10.&nbsp;&nbsp;JavaServer Faces Technology Advanced Concepts</a></p>
<p class="toc level2"><a href="bnawo.html">11.&nbsp;&nbsp;Configuring JavaServer Faces Applications</a></p>
<p class="toc level2"><a href="gkiow.html">12.&nbsp;&nbsp;Using Ajax with JavaServer Faces Technology</a></p>
<p class="toc level3"><a href="gkigr.html">Overview of Ajax</a></p>
<p class="toc level3"><a href="gkinl.html">Using Ajax Functionality with JavaServer Faces Technology</a></p>
<p class="toc level3"><a href="gkabr.html">Using Ajax with Facelets</a></p>
<p class="toc level4"><a href="gkabr.html#gkafn">Using the <tt>f:ajax</tt> Tag</a></p>
<p class="toc level3 tocsp"><a href="gkace.html">Sending an Ajax Request</a></p>
<p class="toc level4"><a href="gkace.html#gkhvt">Using the <tt>event</tt> Attribute</a></p>
<p class="toc level4"><a href="gkace.html#gkhuz">Using the <tt>execute</tt> Attribute</a></p>
<p class="toc level4"><a href="gkace.html#gkhwm">Using the <tt>immediate</tt> Attribute</a></p>
<p class="toc level4"><a href="gkace.html#gkhzs">Using the <tt>listener</tt> Attribute</a></p>
<p class="toc level3 tocsp"><a href="gkddf.html">Monitoring Events on the Client</a></p>
<p class="toc level3"><a href="gkdcb.html">Handling Errors</a></p>
<p class="toc level3"><a href="gkdbr.html">Receiving an Ajax Response</a></p>
<p class="toc level3"><a href="gkuar.html">Ajax Request Lifecycle</a></p>
<p class="toc level3"><a href="gkhyh.html">Grouping of Components</a></p>
<p class="toc level3"><a href="gkaam.html">Loading JavaScript as a Resource</a></p>
<p class="toc level4"><a href="gkaam.html#gkafi">Using JavaScript API in a Facelets Application</a></p>
<p class="toc level4"><a href="gkaam.html#gkipx">Using the <tt>@ResourceDependency</tt> Annotation in a Bean Class</a></p>
<div id="scrolltoc" class="onpage">
<p class="toc level3 tocsp"><a href="">The <tt>ajaxguessnumber</tt> Example Application</a></p>
<p class="toc level4"><a href="#gkoij">The <tt>ajaxguessnumber</tt> Source Files</a></p>
<p class="toc level5"><a href="#gkofw">The <tt>ajaxgreeting.xhtml</tt> Facelets Page</a></p>
<p class="toc level5"><a href="#gkofx">The <tt>ui.js</tt> JavaScript File</a></p>
<p class="toc level5"><a href="#gkohn">The <tt>UserNumberBean</tt> Managed Bean</a></p>
<p class="toc level4 tocsp"><a href="#gkoke">Building, Packaging, Deploying, and Running the <tt>ajaxguessnumber</tt> Example</a></p>
<p class="toc level5"><a href="#glhvu">To Build, Package, and Deploy the <tt>ajaxguessnumber</tt> Example Using NetBeans IDE</a></p>
<p class="toc level5"><a href="#glhvq">To Build, Package, and Deploy the <tt>ajaxguessnumber</tt> Example Using Ant</a></p>
<p class="toc level5"><a href="#glhwe">To Run the <tt>ajaxguessnumber</tt> Example</a></p>
</div>
<p class="toc level3 tocsp"><a href="gksdk.html">Further Information about Ajax in JavaServer Faces</a></p>
<p class="toc level2 tocsp"><a href="gkhxa.html">13.&nbsp;&nbsp;Advanced Composite Components</a></p>
<p class="toc level2"><a href="bnavg.html">14.&nbsp;&nbsp;Creating Custom UI Components</a></p>
<p class="toc level2"><a href="bnafd.html">15.&nbsp;&nbsp;Java Servlet Technology</a></p>
<p class="toc level2"><a href="bnaxu.html">16.&nbsp;&nbsp;Internationalizing and Localizing Web Applications</a></p>
<p class="toc level1 tocsp"><a href="bnayk.html">Part&nbsp;III&nbsp;Web Services</a></p>
<p class="toc level2"><a href="gijti.html">17.&nbsp;&nbsp;Introduction to Web Services</a></p>
<p class="toc level2"><a href="bnayl.html">18.&nbsp;&nbsp;Building Web Services with JAX-WS</a></p>
<p class="toc level2"><a href="giepu.html">19.&nbsp;&nbsp;Building RESTful Web Services with JAX-RS</a></p>
<p class="toc level2"><a href="gjjxe.html">20.&nbsp;&nbsp;Advanced JAX-RS Features</a></p>
<p class="toc level2"><a href="gkojl.html">21.&nbsp;&nbsp;Running the Advanced JAX-RS Example Application</a></p>
<p class="toc level1 tocsp"><a href="bnblr.html">Part&nbsp;IV&nbsp;Enterprise Beans</a></p>
<p class="toc level2"><a href="gijsz.html">22.&nbsp;&nbsp;Enterprise Beans</a></p>
<p class="toc level2"><a href="gijre.html">23.&nbsp;&nbsp;Getting Started with Enterprise Beans</a></p>
<p class="toc level2"><a href="gijrb.html">24.&nbsp;&nbsp;Running the Enterprise Bean Examples</a></p>
<p class="toc level2"><a href="bnbpk.html">25.&nbsp;&nbsp;A Message-Driven Bean Example</a></p>
<p class="toc level2"><a href="gkcqz.html">26.&nbsp;&nbsp;Using the Embedded Enterprise Bean Container</a></p>
<p class="toc level2"><a href="gkidz.html">27.&nbsp;&nbsp;Using Asynchronous Method Invocation in Session Beans</a></p>
<p class="toc level1 tocsp"><a href="gjbnr.html">Part&nbsp;V&nbsp;Contexts and Dependency Injection for the Java EE Platform</a></p>
<p class="toc level2"><a href="giwhb.html">28.&nbsp;&nbsp;Introduction to Contexts and Dependency Injection for the Java EE Platform</a></p>
<p class="toc level2"><a href="gjbls.html">29.&nbsp;&nbsp;Running the Basic Contexts and Dependency Injection Examples</a></p>
<p class="toc level2"><a href="gjehi.html">30.&nbsp;&nbsp;Contexts and Dependency Injection for the Java EE Platform: Advanced Topics</a></p>
<p class="toc level2"><a href="gkhre.html">31.&nbsp;&nbsp;Running the Advanced Contexts and Dependency Injection Examples</a></p>
<p class="toc level1 tocsp"><a href="bnbpy.html">Part&nbsp;VI&nbsp;Persistence</a></p>
<p class="toc level2"><a href="bnbpz.html">32.&nbsp;&nbsp;Introduction to the Java Persistence API</a></p>
<p class="toc level2"><a href="gijst.html">33.&nbsp;&nbsp;Running the Persistence Examples</a></p>
<p class="toc level2"><a href="bnbtg.html">34.&nbsp;&nbsp;The Java Persistence Query Language</a></p>
<p class="toc level2"><a href="gjitv.html">35.&nbsp;&nbsp;Using the Criteria API to Create Queries</a></p>
<p class="toc level2"><a href="gkjiq.html">36.&nbsp;&nbsp;Creating and Using String-Based Criteria Queries</a></p>
<p class="toc level2"><a href="gkjjf.html">37.&nbsp;&nbsp;Controlling Concurrent Access to Entity Data with Locking</a></p>
<p class="toc level2"><a href="gkjia.html">38.&nbsp;&nbsp;Improving the Performance of Java Persistence API Applications By Setting a Second-Level Cache</a></p>
<p class="toc level1 tocsp"><a href="gijrp.html">Part&nbsp;VII&nbsp;Security</a></p>
<p class="toc level2"><a href="bnbwj.html">39.&nbsp;&nbsp;Introduction to Security in the Java EE Platform</a></p>
<p class="toc level2"><a href="bncas.html">40.&nbsp;&nbsp;Getting Started Securing Web Applications</a></p>
<p class="toc level2"><a href="bnbyk.html">41.&nbsp;&nbsp;Getting Started Securing Enterprise Applications</a></p>
<p class="toc level1 tocsp"><a href="gijue.html">Part&nbsp;VIII&nbsp;Java EE Supporting Technologies</a></p>
<p class="toc level2"><a href="gijto.html">42.&nbsp;&nbsp;Introduction to Java EE Supporting Technologies</a></p>
<p class="toc level2"><a href="bncih.html">43.&nbsp;&nbsp;Transactions</a></p>
<p class="toc level2"><a href="bncjh.html">44.&nbsp;&nbsp;Resource Connections</a></p>
<p class="toc level2"><a href="bncdq.html">45.&nbsp;&nbsp;Java Message Service Concepts</a></p>
<p class="toc level2"><a href="bncgv.html">46.&nbsp;&nbsp;Java Message Service Examples</a></p>
<p class="toc level2"><a href="gkahp.html">47.&nbsp;&nbsp;Advanced Bean Validation Concepts and Examples</a></p>
<p class="toc level2"><a href="gkeed.html">48.&nbsp;&nbsp;Using Java EE Interceptors</a></p>
<p class="toc level1 tocsp"><a href="gkgjw.html">Part&nbsp;IX&nbsp;Case Studies</a></p>
<p class="toc level2"><a href="gkaee.html">49.&nbsp;&nbsp;Duke's Tutoring Case Study Example</a></p>
<p class="toc level1 tocsp"><a href="idx-1.html">Index</a></p>
</td>
      <td width="10px">&nbsp;</td>
      <td>
         <div class="header">
             <div class="banner">
                <table width="100%" border="0" cellpadding="5" cellspacing="0">
                   <tbody>
                      <tr>
                         <td valign="bottom"><p class="Banner">The Java EE 6 Tutorial
</p></td>
                         <td align="right"  valign="bottom"><img src="graphics/javalogo.png" alt="Java Coffee Cup logo"></td>
                      </tr>
                   </tbody>
                </table>
             </div>

             <div class="header-links">
	         <a href="./index.html">Home</a> | 
<a href="../information/download.html">Download</a> | 
<a href="./javaeetutorial6.pdf">PDF</a> | 
<a href="../information/faq.html">FAQ</a> | 
<a href="http://download.oracle.com/javaee/feedback.htm">Feedback</a>

             </div>
             <div class="navigation">
                 <a href="gkaam.html"><img src="graphics/leftButton.gif" border="0" alt="Previous" title="Previous"></a>
                 <a href="p1.html"><img src="graphics/upButton.gif" border="0" alt="Contents" title="Contents"></a>
                 <a href="gksdk.html"><img src="graphics/rightButton.gif" border="0" alt="Next" title="Next"></a>
             </div>
         </div>

	 <div class="maincontent">      	 
             

<a name="gkokb"></a><h2>The <tt>ajaxguessnumber</tt> Example Application</h2>
<a name="indexterm-847"></a><a name="indexterm-848"></a><p>To demonstrate the advantages of using Ajax, revisit the <tt>guessnumber</tt> example from
<a href="giepx.html">Chapter&nbsp;5, Introduction to Facelets</a>. If you modify this example to use Ajax, the response need not
be displayed in the <tt>response.xhtml</tt> page. Instead, an asynchronous call is made to the
bean on the server side, and the response is displayed in the originating
page by executing just the input component rather than by form submission.</p>

<p>The source code for this application is in the <tt></tt><i>tut-install</i><tt>/examples/web/ajaxguessnumber/</tt> directory.</p>



<a name="gkoij"></a><h3>The <tt>ajaxguessnumber</tt> Source Files</h3>
<p>The changes to the <tt>guessnumber</tt> application occur in two source files, as well
as the addition of a JavaScript file.</p>



<a name="gkofw"></a><h4>The <tt>ajaxgreeting.xhtml</tt> Facelets Page</h4>
<p>The Facelets page for <tt>ajaxguessnumber</tt>, <tt>web/ajaxgreeting.xhtml</tt>, is almost the same as the
<tt>greeting.xhtml</tt> page for the <tt>guessnumber</tt> application:</p>

<pre>&lt;h:head>
    &lt;title>Ajax Guess Number Facelets Application&lt;/title>
&lt;/h:head>
&lt;h:body>
    &lt;h:form id="AjaxGuess">
        &lt;h:outputScript name="ui.js" target="head"/>
        &lt;h:graphicImage value="#{resource['images:wave.med.gif']}"
                        alt="Duke waving his hand"/>
        &lt;h2>
            Hi, my name is Duke. I am thinking of a number from
            #{userNumberBean.minimum} to #{userNumberBean.maximum}.
            Can you guess it?
        &lt;/h2>
        &lt;p>
            &lt;h:inputText 
                id="userNo" 
                title="Type a number from 0 to 10:"
                value="#{userNumberBean.userNumber}">
                &lt;f:validateLongRange
                    minimum="#{userNumberBean.minimum}"
                    maximum="#{userNumberBean.maximum}"/>
            &lt;/h:inputText>

            &lt;h:commandButton id="submit" value="Submit" >
                &lt;!--&lt;f:ajax execute="userNo" render="result errors1" />-->
                    &lt;f:ajax execute="userNo" render="result errors1" 
                            onevent="msg"/>
                &lt;/h:commandButton>
        &lt;/p>
        &lt;p>&lt;h:outputText id="result" value="#{userNumberBean.response}"/>
        &lt;/p>

        &lt;h:message id="errors1" showSummary="true" showDetail="false"
                   style="color: #d20005;
                   font-family: 'New Century Schoolbook', serif;
                   font-style: oblique;
                   text-decoration: overline" 
                   for="userNo"/>
    &lt;/h:form>
&lt;/h:body></pre><p>The most important change is in the <tt>h:commandButton</tt> tag. The <tt>action</tt> attribute is
removed from the tag, and <tt>f:ajax</tt> tag is added.</p>

<p>The <tt>f:ajax</tt> tag specifies that when the button is clicked, the <tt>h:inputText</tt> component
with the <tt>id</tt> value <tt>userNo</tt> is executed. The components with the <tt>id</tt>
values <tt>result</tt> and <tt>errors1</tt> are then rendered. If that was all you did
(as in the commented-out version of the tag), you would see the output
from both the <tt>result</tt> and <tt>errors1</tt> components, although only one output is valid;
if a validation error occurs, the managed bean is not executed, so the
<tt>result</tt> output is stale.</p>

<p>To solve this problem, the tag also calls the JavaScript function named
<tt>msg</tt>, in the file <tt>ui.js</tt>, as described in the next section. The <tt>h:outputScript</tt>
tag at the top of the form calls in this script.</p>



<a name="gkofx"></a><h4>The <tt>ui.js</tt> JavaScript File</h4>
<p>The <tt>ui.js</tt> file specified in the <tt>h:outputScript</tt> tag of the <tt>ajaxgreeting.xhtml</tt> file
is located in the <tt>web/resources</tt> directory of the application. The file contains just one
function, <tt>msg</tt>:</p>

<pre>var msg = function msg(data) {
    var resultArea = document.getElementById("AjaxGuess:result");
    var errorArea = document.getElementById("AjaxGuess:errors1"); 
    if (errorArea.innerHTML !== null &amp;&amp; errorArea.innerHTML !== "") {
        resultArea.innerHTML="";
    }
};</pre><p>The <tt>msg</tt> function obtains a handle to both the <tt>result</tt> and <tt>errors1</tt>
elements. If the <tt>errors1</tt> element has any content, the function erases the
content of the <tt>result</tt> element, so that the stale output does not
appear in the page.</p>



<a name="gkohn"></a><h4>The <tt>UserNumberBean</tt> Managed Bean</h4>
<p>A small change is also made in the <tt>UserNumberBean</tt> code, so that the
output component does not display any message for the default (null) value of
the property <tt>response</tt>. Here is the modified bean code:</p>

<pre>public String getResponse() {
    if ((userNumber != null) &amp;&amp; (userNumber.compareTo(randomInt) == 0)) {
        return "Yay! You got it!";
    }
    if (userNumber == null) {
        return null;
    } else {
        return "Sorry, " + userNumber + " is incorrect.";
    }
}</pre>

<a name="gkoke"></a><h3>Building, Packaging, Deploying, and Running the <tt>ajaxguessnumber</tt> Example</h3>
<p>You can build, package, deploy, and run the <tt>ajaxguessnumber</tt> application by using either
NetBeans IDE or the Ant tool.</p>



<a name="glhvu"></a><h4>To Build, Package, and Deploy the <tt>ajaxguessnumber</tt> Example Using NetBeans IDE</h4>
<p>This procedure builds the application into the following directory:</p>

<p><tt></tt><i>tut-install</i><tt>/examples/web/ajaxguessnumber/build/web</tt></p>

<p>The contents of this directory are deployed to the GlassFish Server.</p>

<ol>
<li><b>From the File menu, choose Open Project.</b></li>
<li><b>In the Open Project dialog, navigate to:</b><pre><tt></tt><i>tut-install</i><tt>/examples/web/</tt></pre></li>
<li><b>Select the <tt>ajaxguessnumber</tt> folder.</b></li>
<li><b>Select the Open as Main Project check box.</b></li>
<li><b>Click Open Project.</b></li>
<li><b>In the Projects tab, right-click the <tt>ajaxguessnumber</tt> project and select Deploy.</b></li></ol>

<a name="glhvq"></a><h4>To Build, Package, and Deploy the <tt>ajaxguessnumber</tt> Example Using Ant</h4>
<ol>
<li><b>In a terminal window, go to:</b><pre><tt></tt><i>tut-install</i><tt>/examples/web/ajaxguessnumber/</tt></pre></li>
<li><b>Type the following command:</b><pre><tt><b>ant</b></tt></pre><p>This command calls the <tt>default</tt> target, which builds and packages the application into
a WAR file, <tt>ajaxguessnumber.war</tt>, located in the <tt>dist</tt> directory.</p></li>
<li><b>Type the following command:</b><pre><tt><b>ant deploy</b></tt></pre><p>Typing this command deploys <tt>ajaxguessnumber.war</tt> to the GlassFish Server.</p></li></ol>

<a name="glhwe"></a><h4>To Run the <tt>ajaxguessnumber</tt> Example</h4>
<ol>
<li><b>In a web browser, type the following URL:</b><pre>http://localhost:8080/ajaxguessnumber</pre></li>
<li><b>Type a value in the input field and click Submit.</b><p>If the value is in the range 0 to 10, a message states
whether the guess is correct or incorrect. If the value is outside that
range, or if the value is not a number, an error message appears
in red.</p><p>To see what would happen if the JavaScript function were not included, remove
the comment marks from the first <tt>f:ajax</tt> tag in <tt>ajaxgreeting.xhtml</tt> and place
them around the second tag, as follows:</p><pre>&lt;f:ajax execute="userNo" render="result errors1" />
                &lt;!--&lt;f:ajax execute="userNo" render="result errors1" 
                        onevent="msg"/>--></pre><p>If you then redeploy the application, you can see that stale output from
valid guesses continues to appear if you type erroneous input.</p></li></ol>
         </div>
         <div class="navigation">
             <a href="gkaam.html"><img src="graphics/leftButton.gif" border="0" alt="Previous" title="Previous"></a>
             <a href="p1.html"><img src="graphics/upButton.gif" border="0" alt="Contents" title="Contents"></a>
             <a href="gksdk.html"><img src="graphics/rightButton.gif" border="0" alt="Next" title="Next"></a>
         </div>

         <div class="copyright">
      	    <p>Copyright &copy; 2011, Oracle and/or its affiliates. All rights reserved. <a href="docinfo.html">Legal Notices</a></p>
      	 </div>

      </td>
   </tr>
</tbody>
</table>
</body>
</html>

